import classNames from "classnames";
import { useEffect, useState } from "react";
import "./index.scss";
function XtxMessage({
  type,
  text,
  showClose,
}: {
  type: string;
  text: string;
  showClose: boolean;
}) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    setShow(true);
  }, []);
  // 定义一个对象，包含三种情况的样式，对象key就是类型字符串
  const style: any = {
    warn: {
      icon: "icon-warning",
      color: "#E6A23C",
      backgroundColor: "rgb(253, 246, 236)",
      borderColor: "rgb(250, 236, 216)",
    },
    error: {
      icon: "icon-shanchu",
      color: "#F56C6C",
      backgroundColor: "rgb(254, 240, 240)",
      borderColor: "rgb(253, 226, 226)",
    },
    success: {
      icon: "icon-queren2",
      color: "#67C23A",
      backgroundColor: "rgb(240, 249, 235)",
      borderColor: "rgb(225, 243, 216)",
    },
    info: {
      icon: "icon-warning",
      color: "rgb(144, 147, 153)",
      backgroundColor: "#F4F4F5",
      borderColor: "yellow",
    },
  };
  return (
    <>
      {show && (
        <div className="xtx-message" style={{ ...style[type] }}>
          <i
            className={classNames("iconfont", { [style[type].icon]: true })}
          ></i>
          <span className="text">{text}</span>
          {showClose && <i className="iconfont icon-shanchu guanbi"></i>}{" "}
        </div>
      )}
    </>
  );
}
export default XtxMessage;
